<template>
  <section>
    <el-button size="mini" type="primary" @click="addAdTypeBtn">添加</el-button>
    <el-table :data="adTypeList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.name" style="width: 30%" v-if="scope.row.edit"></el-input>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="编码">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.code" style="width: 30%" v-if="scope.row.edit"></el-input>
          <span v-else>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="confirmBtn(scope.row)" v-if="scope.row.edit">{{scope.row.id?'保存':'新建'}}</el-button>
          <el-button size="mini" :type="scope.row.edit?'':'primary'" @click="editBtn(scope.row)">{{scope.row.edit?'取消':'编辑'}}</el-button>
          <el-button size="mini" type="danger" @click="delBtn(scope.row)" v-if="!scope.row.edit">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "index",
    data(){
      return {
        adTypeList:null
      }
    },
    created(){
      this.getAdTypeList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getAdTypeList(){
        this.fetch({name:"getAdTypeList"})
          .then(res=>{
            console.log(res)
            this.adTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addAdTypeBtn(){
        let tmp={name:'',code:'',edit:true}
        this.adTypeList.push(tmp)
      },
      confirmBtn(row){
        if(row.id){
          //保存
          this.updateAdType(row)
        }else {
          //新建
          this.createAdType(row)
        }
      },
      editBtn(row){
        if(row.edit === undefined){
          Vue.set(row,'edit',true)
          return
        }
        row.edit=!row.edit
      },
      delBtn(row){
        console.log(row)
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteAdType",data:{id:row.id}})
              .then(res=>{
                console.log(res)
                this.getAdTypeList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      createAdType(data){
        console.log(data)
        this.fetch({name:"createAdType",data})
          .then(res=>{
            console.log(res)
            this.getAdTypeList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateAdType(data){
        this.fetch({name:"updateAdType",data})
          .then(res=>{
            console.log(res)
            this.getAdTypeList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
